interface OlProps {
  name: string;
  alias: string;
  description: string;
  return: string;
  [namespace: string]: string;
}
interface DomTreeProps {
  name: string;
  description: string;
  data: OlProps[];
}
/**
 * 将虚拟节点挂载到真实节点
 * @param element 元素挂在节点
 * @param data 挂在DOM结构
 */
function mountElement(element: string, data: DocumentFragment) {
  console.log($("#app")[0]);
  $(element)[0].appendChild(data);
}
/**
 * 创建最大的虚拟节点容器
 */
function createContainer() {
  return document.createDocumentFragment();
}
/**
 * 创建小标题
 * @param name 标题内容
 */
function createTitleElement(name: string, type = "h4") {
  const title = document.createElement(type);
  title.innerText = name;
  return title;
}
/**
 * 创建一个大分类的容器
 */
function createClassContainer() {
  return document.createDocumentFragment();
}

function createLiElement(interText: string) {
  const li = document.createElement("li");
  li.innerText = interText;
  return li;
}
/**
 * 创建每个大类中每个小方法的描述
 */
function createClassDomTree(
  data: OlProps[],
  parentContainer: DocumentFragment
) {
  data.forEach((oneTree) => {
    const oneContainer = document.createElement("div");
    const titleElement = createTitleElement(oneTree.description, "h5");
    const ol = document.createElement("ol");
    Object.keys(oneTree).forEach((e) =>
      ol.appendChild(createLiElement(`${e} : ${oneTree[e]}`))
    );
    oneContainer.appendChild(titleElement);
    oneContainer.appendChild(ol);
    parentContainer.appendChild(oneContainer);
  });
  return parentContainer;
}
/**
 * 创建DOM结构树
 * @param domTreeJson DOM结构的JSON数据
 * @param container 最大容器盒子
 * @return 容器盒子挂载满之后的节点
 */
function createDomTree(
  domTreeJson: DomTreeProps[],
  container: DocumentFragment
) {
  domTreeJson.forEach((oneDom) => {
    //创建单个大类的容器
    const oneDomContainer = createClassContainer();
    const classDescription = createTitleElement(oneDom.description);
    oneDomContainer.appendChild(classDescription);
    const FullOneDomContainer = createClassDomTree(
      oneDom.data,
      oneDomContainer
    );
    //将每个大容器的分类塞入最大大容器中
    container.appendChild(FullOneDomContainer);
  });
  return container;
}
function init(domElement: string, data: DomTreeProps[]) {
  const container = createContainer();
  const VDomTree = createDomTree(data, container);
  mountElement(domElement, VDomTree);
}
interface GerDomJsonProps {
  data: {
    message: string;
    data: DomTreeProps[];
  };
}
//解析JSON的源码
function getDomJson(callback?: (res: GerDomJsonProps) => void) {
  const url =
    "https://tcb-mnnvd2dylbogjrre641c9-e382db.service.tcloudbase.com/BlogCommonDomJson";
  $.getJSON(url, (res) => {
    console.log(res);
    if (callback && typeof callback === "function") {
      callback(res.data);
    }
  });
}
